import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:rongcloud_im_wrapper_plugin/rongcloud_im_wrapper_plugin.dart';

import '../models/bt_chat_model.dart';
import '../models/bt_message.dart';

class BtChatMessageTextWidget extends StatelessWidget {
  const BtChatMessageTextWidget({super.key, required this.item, required this.model});

  final BtMessage item;
  final BtChatModel model;

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Visibility(
        visible: item.isSender,
        child: Container(
          padding: const EdgeInsets.only(top: 16, right: 18, bottom: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Row(
                children: [
                  Visibility(
                    visible: item.status == 2,
                    child: InkWell(
                      child: Image.asset(
                        'assets/images/bt_icon_chat_sync.png',
                        width: 16,
                        height: 16,
                      ),
                      onTap: () {
                        model.sendTextMessage();
                      },
                    ),
                  ),
                  Visibility(
                    visible: item.status == 0,
                    child: const SizedBox(
                      width: 16,
                      height: 16,
                      child: CircularProgressIndicator(
                        strokeWidth: 1.0,
                        color: Color(0xFF4DB4FF),
                      ),
                    ),
                  ),
                  const SizedBox(width: 8),
                  Container(
                    constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 196),
                    margin: const EdgeInsets.only(right: 10),
                    padding: const EdgeInsets.only(left: 14, top: 10, right: 14, bottom: 10),
                    decoration: const BoxDecoration(
                      color: Color(0xFF4DB4FF),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(12),
                        bottomLeft: Radius.circular(12),
                        topRight: Radius.circular(2),
                        bottomRight: Radius.circular(12),
                      ),
                    ),
                    child: Text(
                      (item.message as RCIMIWTextMessage).text ?? '',
                      style: const TextStyle(color: Colors.white, fontSize: 14),
                    ),
                  ),
                ],
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: CachedNetworkImage(
                  width: 44,
                  height: 44,
                  fit: BoxFit.fill,
                  imageUrl: model.userAvatar,
                  placeholder: (context, url) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      Visibility(
        visible: !item.isSender,
        child: Container(
          padding: const EdgeInsets.only(left: 18, top: 16, bottom: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: CachedNetworkImage(
                  width: 44,
                  height: 44,
                  fit: BoxFit.fill,
                  imageUrl: model.targetAvatar,
                  placeholder: (context, url) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                ),
              ),
              (item.translatedText ?? '').isNotEmpty
                  ? Container(
                      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 196),
                      margin: const EdgeInsets.only(left: 10),
                      padding: const EdgeInsets.only(left: 14, top: 10, right: 14, bottom: 10),
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(2),
                          bottomLeft: Radius.circular(12),
                          topRight: Radius.circular(12),
                          bottomRight: Radius.circular(12),
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            (item.message as RCIMIWTextMessage).text ?? '',
                            style: const TextStyle(color: Color(0xFF202020), fontSize: 14),
                          ),
                          Container(
                            color: const Color(0xffcccccc),
                            height: 0.5,
                            margin: const EdgeInsets.symmetric(vertical: 10),
                          ),
                          Text(
                            item.translatedText ?? '',
                            style: const TextStyle(color: Color(0xFF202020), fontSize: 14),
                          ),
                        ],
                      ),
                    )
                  : Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 196),
                          margin: const EdgeInsets.only(left: 10),
                          padding: const EdgeInsets.only(left: 14, top: 10, right: 14, bottom: 10),
                          decoration: const BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(2),
                              bottomLeft: Radius.circular(12),
                              topRight: Radius.circular(12),
                              bottomRight: Radius.circular(12),
                            ),
                          ),
                          child: Text(
                            (item.message as RCIMIWTextMessage).text ?? '',
                            style: const TextStyle(color: Color(0xFF202020), fontSize: 14),
                          ),
                        ),
                        InkWell(
                          child: Container(
                            padding: const EdgeInsets.only(left: 25, top: 5),
                            child: Row(
                              children: [
                                const Text(
                                  'Translate',
                                  style: TextStyle(color: Color(0xFF202020), fontSize: 11),
                                ),
                                const SizedBox(width: 3),
                                Visibility(
                                  visible: !item.translating,
                                  child: Image.asset(
                                    'assets/images/bt_icon_chat_translate.png',
                                    width: 14,
                                    height: 14,
                                  ),
                                ),
                                Visibility(
                                  visible: item.translating,
                                  child: const SizedBox(
                                    width: 14,
                                    height: 14,
                                    child: CircularProgressIndicator(
                                      strokeWidth: 1.0,
                                      color: Color(0xFF4DB4FF),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          onTap: () {
                            model.translateText(item);
                          },
                        )
                      ],
                    ),
            ],
          ),
        ),
      ),
    ]);
  }
}
